<template>
  <el-form-item
    class="ticket-time-wrapper"
    :prop="`buyTimes.${index}`"
    :rules="[
      Object.assign({}, validator.rule.ticketTime)
    ]">
    <el-row :class="{'ticket-mb10': index}">
      <el-col :span="8">
        <el-input class="input-block" v-model="editorData.label" :validateEvent="false" :disabled="true" />
      </el-col>
      <el-col :span="12" :offset="1">
        <el-date-picker
          type="datetimerange"
          :validateEvent="false"
          placeholder="请选择该场次的购买起止时间"
          format="yyyy-MM-dd HH:mm"
          :picker-options="pickerOptions"
          v-model="editorValue"
          @change="handleChange"/>
      </el-col>
    </el-row>
  </el-form-item>
</template>
<script>
  import validator from 'utils/validator'
  export default {
    props: {
      value: {
        type: Object
      },
      index: {
        type: Number
      }
    },
    data () {
      let compareTime = this.value.name // 对比时间
      return {
        validator,
        editorData: this.value,
        editorValue: this.value.times,
        pickerOptions: {
          disabledDate (time) {
            return (time.getTime() > Date.parse(compareTime) - 7.2e6) || (time.getTime() < Date.now() - 8.64e7)
          }
        }
      }
    },
    methods: {
      handleChange (newVal = '') {
        let timeArr = newVal.split(' - ')
        if (timeArr[0] && timeArr[1]) {
          if (timeArr[0] === timeArr[1]) {
            this.$set(this.editorValue, 1, new Date(Date.parse(timeArr[1]) + 60e3))
          } else if (Date.parse(timeArr[1]) < Date.parse(timeArr[0])) {
            this.$set(this.editorValue, 0, new Date(Date.parse(timeArr[1])))
            this.$set(this.editorValue, 1, new Date(Date.parse(timeArr[0])))
          }
        }
        this.$timer && clearTimeout(this.$timer)
        this.$timer = setTimeout(() => {
          this.$emit('change', this.index, newVal)
        }, 200)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .ticket-mb10{
    margin-top: 10px;
  }
</style>
<style lang="scss">
  .el-form-item.is-required .ticket-time-wrapper .el-form-item__label:before{
    content: '';
  }
  .ticket-time-wrapper{
    .el-form-item__error{
      position: static;
      margin-left: 265px;
    }
  }
</style>
